<template>
  <view class="home">
    <headersss title='分销中心'></headersss>

    <view class="content">
      <!-- 佣金 -->
      <view class="commission">
        <view class="top">
          <view class="price">
            <view class="">可提现佣金（元）</view>
            <text>1000</text>
          </view>
          <view class="tixian">
            <button @click="gowithdraw()">提现</button>
          </view>
        </view>
        <view class="bottom">
          <image class="imge" src="../../static/imgs/Frame12.png" mode=""></image>
          <view class="bottom_price">
            <view class="">已提现佣金（元）</view>
            <view style="margin-top: 13rpx;font-weight: 600;">500</view>
          </view>
          <view class="line"></view>
          <view class="bottom_price">
            <view class="">待提现佣金（元）</view>
            <view style="margin-top: 13rpx;font-weight: 600;">500</view>
          </view>
        </view>
      </view>

      <!--  -->
      <view class="feature">常用功能</view>

      <view class="features">
        <view class="item" @click="godistribution()">
          <image src="../../static/imgs/Slice93.png" mode=""></image>
          <view class="">分销订单</view>
        </view>
        <view class="item" @click="gomyteam()">
          <image src="../../static/imgs/Slice94.png" mode=""></image>
          <view class="">我的团队</view>
        </view>
        <view class="item" @click="gofrugality()">
          <image src="../../static/imgs/Slice95.png" mode=""></image>
          <view class="">联系客服</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      godistribution() {
        uni.navigateTo({
          url: '/pages/distribution/distribution'
        })
      },
      gomyteam() {
        uni.navigateTo({
          url: '/pages/my_team/my_team'
        })
      },
      gowithdraw() {
        uni.navigateTo({
          url: '/pages/my/withdraw'
        })
      },
      gofrugality() {
        uni.navigateTo({
          url: '/pages/frugality/frugality'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    background: #F5F5F5;
    height: 1612rpx;

  }

  .content {
    position: absolute;
    top: 215rpx;
  }

  .commission {
    margin-left: 32rpx;
    padding: 32rpx;
    width: 686rpx;
    height: 288rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .top {
      margin-bottom: 40rpx;
      display: flex;
      justify-content: space-between;
      text-align: center;

      .price {
        >view {
          margin-bottom: 15rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        >text {
          font-size: 40rpx;
          font-weight: 500;
          color: #000000;
        }
      }

      .tixian {
        >button {
          width: 112rpx;
          height: 48rpx;
          line-height: 48rpx;
          background: linear-gradient(105deg, #F7DB6C 0%, #F2C41C 100%);
          border-radius: 62rpx 62rpx 62rpx 62rpx;

          font-size: 24rpx;
          font-weight: bold;
          color: #333333;
        }
      }
    }

    .bottom {
      display: flex;
      position: relative;

      .imge {
        position: absolute;
        right: 0;
        bottom: -60rpx;
        width: 204rpx;
        height: 204rpx;
      }

      .bottom_price {
        text-align: center;
        margin-right: 40rpx;
      }

      .line {
        margin-right: 48rpx;
        height: 68rpx;
        width: 1rpx;
        background-color: #EFEFEF;
      }
    }
  }

  .feature {
    margin: 48rpx 32rpx 32rpx;

    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
  }

  .features {
    display: flex;
    padding: 32rpx 44rpx;
    margin-left: 32rpx;
    width: 686rpx;
    // height: 164rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .item {
      text-align: center;
      margin-right: 66rpx;

      >image {
        width: 60rpx;
        height: 60rpx;
      }

      >view {
        margin-top: 12rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #333333;
      }
    }
  }
</style>